<template>
  <div>
    <div class="search-margin"></div>
    <div class="mysticky">
      <div class="search-header">
        <van-search
          class="vansearch"
          v-model="products.ques"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        />
      </div>
    </div>
    <van-sidebar class="sidebar" v-model="active" @click="categoryGoods">
      <van-sidebar-item
        v-for="(value, index) in category"
        :key="index"
        :title="value.cat_name"
      />
    </van-sidebar>
    <van-list
      class="gallery"
      v-model:loading="loading"
      :finished="finished"
      v-model:error="error"
      error-text="服务器累了，点击重新加载"
      finished-text="没有更多了"
      offset="500"
      :immediate-check="false"
      @load="onLoad"
    >
      <div class="good-list" id="good-list">
        <div
          class="good-item"
          v-for="(value, index) in goods"
          :key="index"
          :sku="value.F_ProductId"
        >
          <!-- <a class="good-card" :href="'http://www.higuang365.com/wap/product-'+value.F_ProductId+'.html'"> -->
          <div
            class="good-card"
            @click="
              $router.push({
                path: '/product',
                query: { id: value.F_ProductId, parents_id: username },
              })
            "
          >
            <van-image
              class="lazy-img"
              width="100%"
              height="calc(50vw - 5rem)"
              radius="1rem"
              lazy-load
              :src="'http://higuang365.com/' + value.F_pic_url"
            />
            <div class="good-desc">
              <div class="county">
                <img
                  class="county-icon"
                  v-if="value.F_yuliu2"
                  :src="'http://higuang365.com/' + value.F_yuliu2"
                  alt=""
                />

                <div class="county-title">
                  {{ value.F_BrandCountrie }}
                </div>
              </div>

              <div class="title">{{ value.F_Name }}</div>
              <span class="price">¥ {{ value.F_BdPrice }}</span>
              <br />
              <span class="estimate">零售价 {{ value.F_Price }}</span>
              <span
                class="share"
                @click.stop="addGoodsCart(value.F_yuliu3, value.F_ProductId)"
              >
                <i class="iconfont icon-gouwuche1"></i>
              </span>
            </div>

            <!-- </a> -->
          </div>
        </div>
      </div>
    </van-list>
    <NavBar />
  </div>
</template>
<script>
import NavBar from "@/components/home/NavBar";
import { toRefs, reactive, onActivated, onDeactivated } from "vue";
import { GetDSGoodsList, GetProductClass } from "@/api/home";
import { getCookie, addGoodsCart } from "@/lib/ecapi";
export default {
  components: {
    NavBar,
  },
  setup() {
    const data = reactive({
      goods: [],
      products: {
        ques: "", //搜索关键字（商品编码，条码，商品名）
        pageNum: 1, //页码
        pageSize: 20, //每页显示条目数
        Strclass: "nolb", //分类ID
        Strlv: getCookie("MLV"), //等级ID（1会员，13plus，18店主） 不传默认1
      },
      //error: false,
      loading: false,
      finished: false,
      Refresh: false,
      error: false,
      showherf: false,
      username: getCookie("S[MEMBER]"),
      active: 0,
      category: [
        {
          cat_id: "nolb",
          cat_name: "精选",
          child_count: 2,
          goods_count: 0,
          icon: "9554a19716b3d91e3fc38449812c1e65",
          p_order: 0,
          parent_id: 0,
        },
      ],
    });

    let scrollTop1 = 0;
    onActivated(() => {
      // document.getElementById("app").addEventListener("scroll", () => {
      // });
      document.getElementById("app").scrollTop = scrollTop1;
      // console.log(scrollTop1);
    });
    onDeactivated(() => {
      scrollTop1 = document.getElementById("app").scrollTop1;
      // console.log(scrollTop1);
    });
    const onLoad = async () => {
      const res = await GetDSGoodsList(data.products);
      data.loading = false;
      if (!res[0]) {
        data.error = true;
        return;
      }
      data.goods.push(...res[1]);
      data.products.pageNum = data.products.pageNum + 1;
      if (res[1].length < data.products.pageSize) {
        data.finished = true;
      }
    };
    // const tabsRef = ref("vantabs");
    const categoryGoods = async () => {
      //   scrollTop=document.getElementById("app").scrollTop;
      //   console.log(scrollTop)
      data.finished = false;
      data.products.ques = "";
      data.products.Strclass = data.category[data.active].cat_id;
      data.products.pageNum = 1;
      data.goods = [];

      document.getElementById("app").scrollTop = 1;
      //         nextTick(()=>{
      //        if(scrollTop==0){
      // onLoad();

      //       }
      //         })

      // tabsRef.value?.scrollTo(0);
    };
    const onSearch = async () => {
      data.finished = false;
      data.active = 0;
      data.products.Strclass = data.category[data.active].cat_id;
      data.products.pageNum = 1;
      data.goods = [];
      document.getElementById("app").scrollTop = 1;
    };
    const refresh = async () => {
      data.products.pageNum = 1;
      data.finished = false;
      data.goods = [];
      data.Refresh = false;
      onLoad();
    };

    const load = async () => {
      onLoad();
      const res = await GetProductClass();
      if (!res[0]) {
        return;
      }
      res[1].map((item) => {
        if (!item.child_count && item.p_order < 30) {
          data.category.push(item);
        }
      });
      data.category.sort((a, b) => a.p_order - b.p_order);
    };
    const toshop = (productid) => {
      window.location.href =
        "http://www.higuang365.com/wap/product-" + productid + ".html";
      // $router.push({
      //           path: '/product',
      //           query: { id: value.F_ProductId, parents_id: username },
      //         })
    };
    load();
    return {
      ...toRefs(data),
      onLoad,
      refresh,
      addGoodsCart,
      categoryGoods,
      onSearch,
      toshop,
    };
  },
};
</script>
<style lang="scss" scoped>
@import "@/common/style/mixin";
.mysticky {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}
.search-margin {
  height: 5.2rem;
}
.search-header {
  display: flex;
  position: relative;
  z-index: 10;
  .vansearch {
    flex-grow: 1;
    // background: $green;
  }
}
.sidebar {
  width: 8rem;
  height: calc(100vh - 11rem);
  position: fixed;
  white-space: nowrap;
}
.gallery {
  margin-bottom: 6rem;
  margin-left: 8rem;

  .good-list {
    width: calc(100vw - 80px);
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: auto;
  }
  .promotional {
    display: flex;
    width: calc(50% - 1rem);
    flex-direction: column;
    margin-left: 1rem;
    .promotion-item {
      flex: 1;
      img {
        width: 100%;
      }
    }
  }
  .selection {
    width: 100%;
    background: url("../../common/img/jingxuan.png_.webp") no-repeat;
    background-size: 100%;
    background-position-y: 0.6rem;
    h3 {
      // color: #7889fc;
      // text-shadow: 5px 2px 3px #b1bbff;
      color: #ff5c77;
      text-shadow: 5px 2px 3px #ffa0b0;
      font-size: 2rem;
    }
  }
  .good-item {
    box-sizing: border-box;
    width: calc(50% - 1rem);
    margin: 0.5rem;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    animation: jello-horizontal 1s both;
    .good-card {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .good-desc {
      text-align: left;
      font-size: 1.2rem;
      padding: 1rem;
      position: relative;
      .county {
        display: flex;
        .county-icon {
          width: 2rem;
          height: 100%;
        }
        .county-title {
          color: #999;
          margin-left: 0.5rem;
        }
      }

      .title {
        height: 3.2rem;
        line-height: 1.6rem;
        color: #222333;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .price {
        font-size: 1.4rem;
        margin-top: 1rem;
        color: #fd5633;
      }
      .share {
        color: #3c8a58;
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        z-index: 10;
        i {
          font-size: 2rem;
        }
      }
      .estimate {
        color: #c5c5c5;
        text-decoration: line-through;
      }
    }
  }
}
@keyframes jello-horizontal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
